<!-- 动态表单设置组件 -->
<template>
  <div class="setUpForm" id="setUpForm">
    <div class="left">
      <LeftConfig
        :tabCodeList="tabCodeList"
        :layout="layout"
        @layoutChange="emit('update:layout', $event)"
      />
    </div>
    <div class="center">
      <!-- <div class="save">
        <a-button class="save-form" @click="emit('save', copySetUpList)"
          >保存</a-button
        >
      </div> -->
      <CenterConfig
        @choiceComponent="choiceComponent"
        :choiceUuid="componentObj.data.orderNo"
        :setUpList="copySetUpList"
        :layout="layout"
      />
    </div>
    <div class="right">
      <RightDrawer
        ref="rightDrawer"
        v-model:componentObj="componentObj.data"
        @componentObjChange="componentObjChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import LeftConfig from './components/LeftConfig/index.vue';
import CenterConfig from './components/CenterConfig/index.vue';
import clonedeep from 'lodash.clonedeep';
import RightDrawer from './components/RightDrawer/index.vue';
import { Control } from '@/apis/control/type';

const props = withDefaults(
  //参数说明
  defineProps<{
    tabCodeList: string[]; //tab要显示的tabcode列表
    setUpList: any[]; //组件列表
    layout: string; //a-form的layout属性
  }>(),
  {
    setUpList: () => []
  }
);

const emit = defineEmits(['update:layout', 'save']);

const copySetUpList: any = ref([]);

watch(
  () => props.setUpList,
  (val: any) => {
    copySetUpList.value = clonedeep(val);
    choiceComponent({});
    if (copySetUpList.value.length > 0) choiceComponent(copySetUpList.value[0]);
  }
);
//组件设置的参数
const componentObj = reactive<{ data: Control }>({ data: {} });
const rightDrawer = ref(); //获取rightDrawer元素
//点击组件被选中时
const choiceComponent = (element: Control) => {
  // console.log("copySetUpList.value", element);
  if (!element) {
    componentObj.data = {};
    return;
  }

  componentObj.data = element;
  rightDrawer.value.visible = true;
  // console.log(897897979);
};
//组件被设置时
const componentObjChange = (data: any) => {
  const changeIndex = copySetUpList.value.findIndex((item: any) => {
    return item.orderNo === componentObj.data.orderNo;
  });
  copySetUpList.value[changeIndex].cnName = data.cnName;
  copySetUpList.value[changeIndex].required = data.required;
  copySetUpList.value[changeIndex].isDefault = data.isDefault;
  copySetUpList.value[changeIndex].enable = data.enable;
  copySetUpList.value[changeIndex].enName = data.enName;
  copySetUpList.value[changeIndex].fieldName = data.fieldName;
  copySetUpList.value[changeIndex].props = { ...data.props };
};

defineExpose({ copySetUpList, rightDrawer }); //抛出处理过后的列表
</script>

<style lang="less" scoped>
.setUpForm {
  // position: relative;
  display: flex;
  // align-items: center;
  justify-content: center;
  background: rgb(243, 243, 243);
  background: #fff;
  overflow: hidden;
  flex: 1;
  // height: 100%;
  .left {
    // flex: 1;
    width: 250px;
    height: 100%;
    border: #eee solid 1px;
  }
  .center {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    // overflow: hidden;
    // padding: 20px;
    // margin: 0 16px;
    .save {
      // display: flex;
      // justify-content: flex-end;
      // margin-bottom: 16px;
    }
  }
  .right {
    // flex: 1;
    overflow: auto;
    background: #fff;
    width: 300px;
    height: 100%;
    position: relative;
    border: #eee solid 1px;
  }
}
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
  z-index: 100;
  width: 6px;
  height: 6px;
  background-color: #fff;
}

// /* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  z-index: 100;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}

// /* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  z-index: 100;
  background-color: rgb(169 169 169 / 50%);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}
</style>
